<template>
    <div>
     <mt-swipe :auto="4000">
       <mt-swipe-item  v-for="val in images" :key="val.id">
         <img :src="val.url" alt="" >
       </mt-swipe-item>
     </mt-swipe>

     <div>
         <ul class="mui-table-view mui-grid-view mui-grid-9">
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <img src="../../src/images/menu1(1).png" alt="">
            <div class="mui-media-body">新闻资讯</div></a></li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <img src="../../src/images/menu2.png" alt="">
            <div class="mui-media-body">图片分享</div></a></li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <img src="../../src/images/menu3.png" alt="">
            <div class="mui-media-body">商品购买</div></a></li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <img src="../../src/images/menu4.png" alt="">
            <div class="mui-media-body">留言反馈</div></a></li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <img src="../../src/images/menu5.png" alt="">
            <div class="mui-media-body">视频专区</div></a></li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <img src="../../src/images/menu6.png" alt="">
            <div class="mui-media-body">联系我们</div></a></li>
        </ul>
     </div>

    </div>
</template>

<script>
    export default {
        name: "Home",
      data(){
          return {
            "images":[
              {id:'1',url:"/src/assets/1.jpg",},
              {id:'2',url:"/src/assets/2.jpg",},
              {id:'3',url:"/src/assets/3.jpg",},
              {id:'4',url:"/src/assets/4.jpg",},
              {id:'5',url:"/src/assets/5.jpg",},
              {id:'6',url:"/src/assets/6.jpg",},
              {id:'7',url:"/src/assets/7.jpg",}
            ]
          }
      }
    }
</script>

<style scoped>
.mint-swipe{
  height: 200px;
  background: red;
}
  .img{
    height: 100%;
    width: 100%;
  }

.mui-grid-view.mui-grid-9{
  background: #fff;
}
.mui-grid-view.mui-grid-9 img{
  width: 55px;
}
.mui-grid-view.mui-grid-9 .mui-media-body{
  font-size: 13px;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
  border: none;
}
</style>
